<template>
  <div id="container"></div>
  <!-- <div class="input-card">
    <div class="input-item">
      <button @click="startAnimation">开始动画</button>
      <button @click="pauseAnimation">暂停动画</button>
      <button @click="resumeAnimation">继续动画</button>
      <button @click="stopAnimation">停止动画</button>
      <button @click="demoClick">DEMO</button>
    </div>
  </div> -->
</template>
<script setup>
import { onMounted, onUnmounted, defineProps, defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { watch, ref } from "vue";
import aircraft_icon from '@/assets/icons/flightTrajectory/aircraft_icon.png'
import aircraft_icon2 from '@/assets/icons/flightTrajectory/aircraft_icon2.png'

let map = null;
let marker = null;
let polyline = null;
let passedPolyline = null
let lineArr = ref();

const emit = defineEmits();
const centralPointMap = ref()
const props = defineProps({
  arrList: {
    type: Array,
    default: []
  },
  playbackInform: {
    type: Object,
    default: {}
  }
});

watch(
  () => props.arrList,
  (newValue) => {
    lineArr.value = newValue.map((point) => {
      return [parseFloat(point.longitude), parseFloat(point.latitude)];
    });
    centralPointMap.value = lineArr.value[0]
    console.log(lineArr.value, 'lineArr.value')
    switchTrajectory(lineArr.value)

    // polyline.setPath(lineArr.value)
    // polyline.setMap(null);
    // marker.setPosition(lineArr.value[0]);
    // polyline = new AMap.Polyline({
    //   map: map,
    //   path: lineArr.value,
    //   showDir: true,
    //   strokeColor: "#28F",  //线颜色
    //   // strokeOpacity: 1,     //线透明度
    //   strokeWeight: 6,      //线宽
    //   // strokeStyle: "solid"  //线样式
    //   extData: {
    //     id: "myPolyline", // 自定义属性，可以是任何数据
    //     description: "This is a custom description." // 更多自定义属性
    //   }
    // });

    // passedPolyline = new AMap.Polyline({
    //   map: map,
    //   // path: lineArr,
    //   strokeColor: "#AF5",  //线颜色
    //   // strokeOpacity: 1,     //线透明度
    //   strokeWeight: 6,      //线宽
    //   // strokeStyle: "solid"  //线样式
    // });
    // marker.setAngle(-90);

    // map.setFitView();
  }
)


watch(
  () => props.playbackInform,
  (newValue) => {
    if (newValue.play && newValue.firstClick) {
      setTimeout(() => {
        startAnimation()
      }, 100)
    }
    if (newValue.play && !newValue.firstClick) {
      resumeAnimation()
    }
    if (!newValue.play) {
      pauseAnimation()
    }
  },
  { deep: true }
)



AMapLoader.load({
  key: "59c61f064c552f2ace25ff0c1d6465a7", // 申请好的Web端开发者Key，首次调用 load 时必填
  version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  // plugins: ['AMap.moveAnimation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
  .then((AMap) => {
    // AMap.plugin('AMap.MoveAnimation', function () { })
    map = new AMap.Map("container", {
      // 设置地图容器id
      // viewMode: "3D", // 是否为3D地图模式
      zoom: 16, // 初始化地图级别
      resizeEnable: true,
      showBuildingBlock: true,
      layers: [new AMap.TileLayer.Satellite()],
      center: centralPointMap.value, // 初始化地图中心点位置
    });

    marker = new AMap.Marker({
      map: map,
      // zoom: 15,
      position: centralPointMap.value,
      // icon: "https://webapi.amap.com/images/car.png",
      icon: aircraft_icon2,
      offset: new AMap.Pixel(-20, -30),
      autoRotation: true,
      angle: -90,
      // content: `<div>6666666666666</div>`
    });

    // 绘制轨迹
    polyline = new AMap.Polyline({
      map: map,
      path: lineArr.value,
      showDir: true,
      strokeColor: "#28F",  //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6,      //线宽
      // strokeStyle: "solid"  //线样式
      extData: {
        id: "myPolyline", // 自定义属性，可以是任何数据
        description: "This is a custom description." // 更多自定义属性
      }
    });

    passedPolyline = new AMap.Polyline({
      map: map,
      // path: lineArr,
      strokeColor: "#AF5",  //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6,      //线宽
      // strokeStyle: "solid"  //线样式
    });

    marker.on('moving', function (e) {
      passedPolyline.setPath(e.passedPath);
      const currentPointIndex = e.passedPath.length - 1; // 获取当前车辆所在的轨迹点索引
      emit('currentPointIndex', currentPointIndex)
      if (currentPointIndex >= 0 && currentPointIndex < props.arrList.length) {
        const currentData = props.arrList[currentPointIndex];
        // 更新朝向和俯仰角
      }
    });
    map.setFitView();
  })
  .catch((e) => {
    console.log(e);
  });

onMounted(() => {

});


function switchTrajectory(val) {
  polyline.setPath(val)
  polyline.setMap(null);
  passedPolyline.setMap(null)
  marker.setPosition(centralPointMap.value)
  polyline = new AMap.Polyline({
    map: map,
    path: lineArr.value,
    showDir: true,
    strokeColor: "#28F",  //线颜色
    strokeOpacity: 0.8,     //线透明度
    strokeWeight: 6,      //线宽
    strokeStyle: "solid",  //线样式
    lineJoin: "bevel",
  });

  passedPolyline = new AMap.Polyline({
    map: map,
    // path: lineArr,
    strokeColor: "#AF5",  //线颜色
    // strokeOpacity: 1,     //线透明度
    strokeWeight: 6,      //线宽
    // strokeStyle: "solid"  //线样式
  });
  marker.setAngle(-90);
  map.setFitView();
}


//开始播放
function startAnimation() {
  marker.moveAlong(lineArr.value, 300)
};

//暂停播放
function pauseAnimation() {
  marker.pauseMove();
}

//继续播放
function resumeAnimation() {
  marker.resumeMove();
}

//停止播放
function stopAnimation() {
  marker.stopMove();
}

function demoClick() {
  lineArr.value = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]];
  polyline.setPath([[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]])
  centralPointMap.value = [116.397428, 39.90923]
  map.setFitView();
  polyline.setMap(null);
  polyline = new AMap.Polyline({
    map: map,
    path: lineArr.value,
    showDir: true,
    strokeColor: "#28F",  //线颜色
    // strokeOpacity: 1,     //线透明度
    strokeWeight: 6,      //线宽
    // strokeStyle: "solid"  //线样式
    extData: {
      id: "myPolyline", // 自定义属性，可以是任何数据
      description: "This is a custom description." // 更多自定义属性
    }
  });

  passedPolyline = new AMap.Polyline({
    map: map,
    // path: lineArr,
    strokeColor: "#AF5",  //线颜色
    // strokeOpacity: 1,     //线透明度
    strokeWeight: 6,      //线宽
    // strokeStyle: "solid"  //线样式
  });
  marker.setAngle(-90);
  marker.setPosition([116.478935, 39.997761]);
  map.setFitView();
}


onUnmounted(() => {
  map?.destroy();
});
</script>
<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 670px;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}

.input-item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
</style>
